import { FC, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import styles from "./ManageLayout.module.scss"
import { Button, Divider, Space } from "antd";
import { BarsOutlined, PlusOutlined, StarOutlined } from "@ant-design/icons"

const ManageLayout: FC = () => {

    const nav = useNavigate();
    const { pathname } = useLocation();

    return <div className={styles.container}>
        <div className={styles.left}>
            <Space direction="vertical">
                <Button type="primary" size="large" icon={<PlusOutlined />}>创建问卷</Button>
                <Divider></Divider>
                <Button type={pathname.startsWith("/manage/list") ? "primary" : "text"} size="large" icon={<BarsOutlined />} onClick={() => { nav("/manage/list") }}>我的问卷</Button>
                <Button type={pathname.startsWith("/manage/star") ? "primary" : "text"} size="large" icon={<StarOutlined />} onClick={() => { nav("/manage/star") }}>星标问卷</Button>
            </Space>
        </div>
        <div className={styles.right}>
            <Outlet />
        </div>
    </div>
}

export default ManageLayout